import { useEffect, useState } from "react"
import styled from "styled-components"
import XChartBox from "../chart-box"
import BubbleItem from "./bubble-item"
import pic from '../../static/ccc.svg'
import mockjs from 'mockjs'
import { num } from "../../utils/api"

export type Msg = {
  time: number,
  text: string,
  left: number,
}
const name = mockjs.mock({ name: '@cname' })
const useMsg = () => {

  const [msgs, setMsg] = useState<Msg[]>([{ ...getMsg(), left: 10 }])

  useEffect(() => {
    setInterval(() => {
      setMsg(msgs => {
        if (msgs.length > 10) msgs.shift()
        let left = msgs[msgs.length - 1].left
        let nextLeft = 10
        if (left === 10) nextLeft = 60
        if (left === 60) nextLeft = 125
        if (left === 125) nextLeft = 10
        return [...msgs, { ...getMsg(), left: nextLeft }]
      })
    }, 2500)
  }, [])

  return msgs
}

const Bubble = () => {

  const msgs = useMsg()

  return <XChartBox title="个体分析">
    <Container>
      {msgs.map(item => <BubbleItem key={item.time} item={item} />)}
      <img src={pic} />
    </Container>
  </XChartBox>
}

export default Bubble

const Container = styled.div`
  box-sizing: border-box;
  height: 208px;
  width: 380px;
  padding: 24px;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
`

function getName() {
  return mockjs.mock({ name: '@cname' }).name
}

function getTime(data: number) {
  let time = new Date(data)
  let hours = time.getHours()
  let min = time.getMinutes() + 1
  let max = min > 3 ? 3 : min
  return `${hours}:${min - num(max, 0)}`
}

function getMsg() {
  const time = Date.now()

  return {
    time,
    text: `${getTime(time)} ${getName()}同学提交了一份作业`
  }
}

